<template>
  <div>
    <div class="dataTitle">
      <div>{{$t('userAdmin.data.nav.title')}}</div>
    </div>
    <div class="pageCenter1">
      <a href="javascript:;"><div class="contexTitle1" id="order1" @click="onclickOrder01">{{$t('userAdmin.data.nav.workData')}}</div></a>
      <a href="javascript:;"><div class="contexTitle2" id="order2" @click="onclickOrder02">{{$t('userAdmin.data.nav.workOf')}}</div></a>
      <div class="month" id="m">
        <div class="orderContext">
          <a href="javascript:;"><div class="out" id="out" @click="onclickOutMoney">{{$t('userAdmin.data.nav.myPublish')}}</div></a>
          <a href="javascript:;"><div class="in" id="in" @click="onclickInMoney">{{$t('userAdmin.data.nav.myReply')}}</div></a>
<!--          <a href="javascript:;"><div class="detial">详情></div></a>-->
        </div>
        <div class="zhuTu1" id="tu1">
          <UserAdminMyDataMap01 />
        </div>
        <div class="zhuTu2" id="tu2">
          <UserAdminMyDataMap02 />
        </div>
      </div>

      <div class="year" id="y">
        <div class="orderContext">
          <a href="javascript:;"><div class="out" id="out2" @click="onclickOutMoney02">{{$t('userAdmin.data.nav.myPublish')}}</div></a>
          <a href="javascript:;"><div class="in" id="in2" @click="onclickInMoney02">{{$t('userAdmin.data.nav.myReply')}}</div></a>
<!--          <a href="javascript:;"><div class="detial">详情></div></a>-->
        </div>
        <div class="zhuTu3" id="tu3">
          <UserAdminMyDataMap03 />
        </div>
        <div class="zhuTu4" id="tu4">
          <UserAdminMyDataMap04 />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import UserAdminMyDataMap01 from './UserAdminMyData-map01'
    import UserAdminMyDataMap02 from './UserAdminMyData-map02'
    import UserAdminMyDataMap03 from './UserAdminMyData-map03'
    import UserAdminMyDataMap04 from './UserAdminMyData-map04'
    export default {
        name: "UserAdminMyData",
        data(){
            return{
                loading:"true",
            }
        },
        components:{
            UserAdminMyDataMap01,
            UserAdminMyDataMap02,
            UserAdminMyDataMap03,
            UserAdminMyDataMap04,
        },
        mounted(){
            this.$emit("component","myData")
        },
        methods:{
            onclickOrder01(){
                document.getElementById("order1").style.borderBottom="2px solid green"
                document.getElementById("order2").style.borderBottom="none"
                document.getElementById("m").style.display="block"
                document.getElementById("y").style.display="none"
            },
            onclickOrder02(){
                document.getElementById("order2").style.borderBottom="2px solid green"
                document.getElementById("order1").style.borderBottom="none"
                document.getElementById("y").style.display="block"
                document.getElementById("m").style.display="none"
            },
            onclickOutMoney(){
                document.getElementById("out").style.border=" 1px solid rgb(57, 182, 19)"
                document.getElementById("in").style.border="none"
                document.getElementById("tu1").style.display="block"
                document.getElementById("tu2").style.display="none"
            },
            onclickInMoney(){
                document.getElementById("in").style.border=" 1px solid rgb(57, 182, 19)"
                document.getElementById("out").style.border="none"
                document.getElementById("tu1").style.display="none"
                document.getElementById("tu2").style.display="block"
            },
            onclickOutMoney02(){
                document.getElementById("out2").style.border=" 1px solid rgb(57, 182, 19)"
                document.getElementById("in2").style.border="none"
                document.getElementById("tu3").style.display="block"
                tu4.style.display="none"
            },
            onclickInMoney02(){
                document.getElementById("in2").style.border=" 1px solid rgb(57, 182, 19)"
                document.getElementById("out2").style.border="none"
                document.getElementById("tu3").style.display="none"
                document.getElementById("tu4").style.display="block"
            }

        }
    }
</script>

<style scoped>
  .pageCenter1{
    height: 550px;
    width: 100%;
    /*width: 840px;*/
    position: relative;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 3px;
    letter-spacing: 1px;
  }
  .dataTitle{
    width: 100%;
    background-color: white;
    margin-bottom: 10px;
    border-radius: 3px;
  }
  .dataTitle div{
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    color: #414141;
    margin-left: 20px;
  }
  .contexTitle1,.contexTitle2{
    position: absolute;
    top: 30px;
    left: 260px;
    color: rgb(92, 92, 92);
    font-weight: bolder;
    padding-bottom: 5px;
    /*background-color: blue;*/
  }
  .contexTitle1{
    border-bottom: 2px solid green;
  }
  .contexTitle2{
    left: 600px;
  }
  .contexTitle1:hover,.contexTitle2:hover{
    color: black;
  }
  .orderContext{
    width: 100%;
    height: 430px;
     /*background-color: rgb(216, 216, 216);*/
     /*border: 1px solid rgb(153, 153, 153);*/
    position: absolute;
    top: 60px;
    left: 0px;
    /* background-color: darksalmon; */
  }
  .in, .out,.detial{
    width: 90px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    /* background-color: blueviolet; */
    border-radius: 10px;
    position: absolute;
    top: 10px;
    left: 350px;
    color: rgb(117, 117, 117);
  }
  .detial{
    width: 100px;
    left: 700px;
    margin-left: 70px;
     /*background-color: blue;*/
  }
  .detial:hover{
    color: rgb(0, 0, 0);
  }
  .detial:active{
    color: rgb(73, 73, 73);
  }
  .out{
    border: 1px solid rgb(57, 182, 19);
  }
  .in{
    left: 480px;
  }
  .in:hover, .out:hover{
    color: rgb(71, 71, 71);
  }
  .zhuTu1,.zhuTu2,.zhuTu3,.zhuTu4{
    /*width: 800px;*/
    /*height: 365px;*/
    /*position: absolute;*/
    /*top: 120px;*/
    /*left: 20px  ;*/
    /* background-color: darkseagreen; */
  }
  .zhuTu2{
    display: none;
  }
  .year{
    display: none;
  }
  .zhuTu4{
    display: none;
  }
</style>
